<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <body>
    <div id="my-lucky"></div>
    <script src="../dev.js"></script>
    <script>
      // 创建大转盘抽奖
      var luckyWheel = new LuckyCanvas.LuckyWheel({
        el: '#my-lucky',
        width: '300px',
        height: '300px',
      }, {
        // prizes: [],
        defaultStyle: {
          fontColor: '#d64737',
          fontSize: '14px'
        },
        defaultConfig: {
          gutter: 1,
          stopRange: 0.5,
        },
        blocks: [
          { padding: '13px', background: '#d64737' }
        ],
        buttons: [
          { radius: '50px', background: '#d64737' },
          { radius: '45px', background: '#fff' },
          { radius: '41px', background: '#f6c66f', pointer: true },
          {
            radius: '35px', background: '#ffdea0',
            imgs: [{ src: '', width: '65%', top: '-50%' }]
          }
        ],
        start () {
          luckyWheel.play()
          // setTimeout(() => {
          //   luckyWheel.stop(Math.random() * 8 >> 0)
          // }, 3000)
        },
        end (prize) {
          console.log(prize)
          // alert(`恭喜你获得${prize.title}`)
        },
      })
      // 设置奖品
      setTimeout(() => {
        const prizes = []
        luckyWheel.prizes = []
        let data = [
          '1元红包',
          '100元红包',
          '0.5元红包',
          '2元红包',
          '10元红包',
          '50元红包',
          '0.3元红包',
          '5元红包',
        ]
        data.forEach((item, index) => {
          luckyWheel.prizes.push({
            title: item,
            background: index % 2 ? '#f9e3bb' : '#f8d384',
            fonts: [{ text: item, top: '10%', fontWeight: 300 }],
            imgs:[{ src: `./img/${index}.png`, width: '30%', top: '35%' }],
          })
        })
        // luckyWheel.prizes = prizes
      }, 500)
      setTimeout(_ => {
        // luckyWheel.prizes[0].fonts[0].text = 'xxx'
        // luckyWheel.blocks[0].background = '#000'
        luckyWheel.defaultStyle.fontColor = 'green'
        luckyWheel.defaultConfig.gutter = '3'
        // luckyWheel.defaultConfig.offsetDegree = 22.5
        // luckyWheel.$set(luckyWheel.defaultConfig, 'offsetDegree', '22.5')
        // luckyWheel.initComputed()
        // console.log('offsetDegree' in Object.prototype)
        // luckyWheel.init()
        // console.log(luckyWheel.defaultConfig)
      }, 1000)
      setTimeout(() => {
        // console.log(luckyWheel.prizes)
        // luckyWheel.prizes.pop()
        // luckyWheel.prizes.push({
        //   title: '123',
        //   background: 'pink',
        //   fonts: [{ text: '123', top: '10%', fontWeight: 300 }],
        //   imgs:[{ src: ``, width: '30%', top: '35%' }],
        // })
        // luckyWheel.blocks.push({ padding: '13px', background: '#000' })
        // luckyWheel.blocks[0] = { padding: '13px', background: '#000' }
      }, 2000);
    </script>
  </body>
</body>
</html>
